<template>
  <div class="container">
    <SeamlessScroll :speed="1" autoScroll>
      <template #top>
        <div class="block">
          <div v-for="(item, index) in topList" :key="index" class="list-item">
            <div>{{ item.icon }}</div>
            <div class="list-item-name">{{ item.name }}</div>
          </div>
        </div>
      </template>

      <template #bottom>
        <div class="block">
          <div
            v-for="(item, index) in bottomList"
            :key="index"
            class="list-item"
          >
            <div>{{ item.icon }}</div>
            <div class="list-item-name">{{ item.name }}</div>
          </div>
        </div>
      </template>
    </SeamlessScroll>
  </div>
</template>

<script setup>
import SeamlessScroll from "./SeamlessScroll.vue";

const props = defineProps({
  topList: {
    type: Array,
    default: () => [],
  },
  bottomList: {
    type: Array,
    default: () => [],
  },
});
</script>

<style scoped>
.container {
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
  padding: 20px 0;
}

.block {
  display: flex;
  align-items: center;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background-color: white;
  border-radius: 8px;
  margin: 6px 12px;
}

.list-item-name {
  margin-left: 12px;
}
</style>
